<template>
    <div class="newsWrap" ref="BScroll">
        <div class="Ins">
            <!-- 下拉加载效果 -->
            <div class="upDown">
                <div v-show="beforePullDown">
                    <span>下拉刷新</span>
                </div>

                <div v-show="!beforePullDown">
                    <div v-show="isPullingDown">
                        <van-loading size="28px" color="#31c27c">加载中...</van-loading>
                    </div>

                    <div v-show="!isPullingDown">
                        <span>刷新成功</span>
                    </div>
                </div>
            </div>
            <div class="newest clearfix">
                <Newest :newestInfo="item" v-for="item in insArr" :key="item.id" />
            </div>
            <!-- 上拉加载效果 -->
            <div class="pullUpWrap" v-if="flag">
                <van-loading size="28px" color="#31c27c" v-show="isLoading">加载中...</van-loading>
                <span v-show="!isLoading">没有数据啦</span>
            </div>
        </div>
    </div>
</template>

<script>
import Newest from "@/components/Newest";
import BScroll from "@better-scroll/core"; //滚动插件-下拉刷新/上拉触底
import PullDown from "@better-scroll/pull-down"; //下拉刷新 依赖滚动插件
import Pullup from "@better-scroll/pull-up"; //上拉触底 依赖滚动插件
BScroll.use(PullDown)
BScroll.use(Pullup)

export default {
    name: "Ins",
    data() {
        return {
            total:10,
            page: 1,
            insArr: [],
            bscroll: null,

            isLoading: true, //控制上拉加载效果
            flag: false, //控制上拉显示文字

            beforePullDown: true, //控制下拉加载效果
            isPullingDown: false, //控制下拉显示文字
        };
    },
    components: { Newest },
    async mounted() {
        await this.getData();
        this.initBScroll()
    },
    methods: {
        async getData(total=10,page = 1) {
            try {
                const result = await this.$api.getNewest(total,page);
                if (result.status == 200) {

                    if (result.data.length < 1) {
                        // 隐藏上拉加载效果
                        this.isLoading = false;
                        this.flag = true;
                        return false
                    }

                    // 通过展开运算符的形式，进行新旧数据的拼接(扩展运算符,右边赋值给左边)
                    this.insArr = [...this.insArr, ...result.data];
                    // this.insArr=this.insArr.concat(result.data)  //concat()合并多个数组
                }

            } catch (error) {
                console.log(error);
            }
        },

        // 初始化滚动插件配置项
        initBScroll() {
            this.bscroll = new BScroll(this.$refs.BScroll, {
                // pullDownRefresh:true,//开启下拉刷新
                pullUpLoad: true,//开启上拉触底(加载)
                pullDownRefresh: {
                    threshold: 40,// 顶部下拉刷新的距离
                },
                click:true
            })

            // 调用上拉触底处理函数
            this.bscroll.on("pullingUp", this.pullingUpHandler);
            // 调用下拉刷新处理函数
            this.bscroll.on("pullingDown", this.pullingDownHandler);
        },
        // 上拉触底
        async pullingUpHandler() {
            this.flag = true

            // 说明没有更多数据了
            if (!this.isLoading) {
                // finishPullUp()：发生上拉动作之后，关闭上拉行为(关闭之后，才能开启下一次)
                this.bscroll.finishPullUp();
                return;
            }

            this.page++//页码
            await this.getData(this.total,this.page)

            // finishPullUp()：发生上拉动作之后，关闭上拉行为(关闭之后，才能开启下一次)
            // 每次触发 pullingUp 钩子后，应该主动调用 finishPullUp() 告诉 BetterScroll 准备好下一次的 pullingUp 钩子。
            this.bscroll.finishPullUp();
            // 当 DOM 结构发生变化的时候务必要调用确保滚动的效果正常
            this.bscroll.refresh();
        },
        // 下拉刷新
        async pullingDownHandler() {
            this.isLoading = false;
            this.flag = false;

            this.beforePullDown = false;
            this.isPullingDown = true;

            // 清空数据
            this.page = 1;
            this.insArr = [];

            await this.getData()

            this.flag = true;
            this.isLoading = true;

            this.beforePullDown = false;
            this.isPullingDown = false;

            this.bscroll.finishPullDown(); // 发生下拉动作之后，关闭下拉刷新行为(关闭之后，才能开启下一次)
            this.bscroll.refresh(); // 当 DOM 结构发生变化的时候务必要调用确保滚动的效果正常

            setTimeout(() => {
                this.beforePullDown = true;
                this.isPullingDown = true;
            }, 1000);
        }

    }
};
</script>

<style lang="less">
.newsWrap {
    position: relative;
    overflow: hidden;
    // 如果添加了头部或者底部的固定定位、浮动...，则不需要
    height: calc(100vh - 2rem);

    .pullUpWrap,
    .upDown {
        width: 100%;
        padding: 0 0.3rem;
        text-align: center;
        color: #999;
        font-size: 0.28rem;
        padding-bottom: .2rem;
    }

    // 解决上拉刷新，加载效果的文字显示问题
    .upDown {
        position: absolute;
        top: 0px;
        left: 0;
        transform: translateY(-100%);
    }
}
</style>